piratezon_new/app/pages/site-manager/field/detail/[id].vue

<template>
  <div class="admin--page-content">
    <div class="admin--form">
      <!-- 낚시분야 상세 -->
      <table class="admin--form--table">
        <colgroup>
          <col style="width: 120px;">
          <col>
        </colgroup>
        <tbody>
          <tr>
            <th><div>분야</div></th>
            <td>{{ formData.name || "-" }}</td>
          </tr>
          <tr>
            <th><div>가중치</div></th>
            <td class="color--yellow">{{ formData.weight || "-" }}</td>
          </tr>
          <tr>
            <th><div>상태</div></th>
            <td>
              <span :class="['admin--badge', formData.status_YN === 'Y' ? 'admin--badge-active' : 'admin--badge-ended']">
                {{ formData.status_YN === "Y" ? "사용중" : "미사용" }}
              </span>
            </td>
          </tr>
          <tr>
            <th><div>등록일</div></th>
            <td>{{ formatDateTime(formData.created_at) }}</td>
          </tr>
          <tr>
            <th><div>최근 수정</div></th>
            <td>{{ formatDateTime(formData.updated_at) }}</td>
          </tr>
          <tr>
            <th><div>사용 챌린지</div></th>
            <td></td>
          </tr>
          <tr>
            <th><div>사용 퀘스트</div></th>
            <td></td>
          </tr>
        </tbody>
      </table>

      <!-- 버튼 영역 -->
      <div class="admin--form-actions">
        <button type="button" class="admin--btn" @click="goToList">
          ← 목록으로
        </button>
        <button type="button" class="admin--btn admin--btn-red-border ml--auto" @click="handleDelete">
          삭제
        </button>
        <button type="button" class="admin--btn admin--btn-red" @click="goToEdit">
          수정
        </button>
      </div>

      <!-- 알림 모달 -->
      <AdminAlertModal
        v-if="alertModal.show"
        :title="alertModal.title"
        :message="alertModal.message"
        :type="alertModal.type"
        @confirm="handleAlertConfirm"
        @cancel="handleAlertCancel"
        @close="closeAlertModal"
      />
    </div>
  </div>
</template>

<script setup>
  import { ref, onMounted } from "vue";
  import { useRoute, useRouter } from "vue-router";
  import AdminAlertModal from "~/components/admin/AdminAlertModal.vue";

  definePageMeta({
    layout: "admin",
    middleware: ["auth"],
  });

  const route = useRoute();
  const router = useRouter();
  const { get, del } = useApi();

  const fieldId = route.params.id;

  const formData = ref({
    name: "",
    weight: "",
    status_YN: "Y",
    created_at: "",
    updated_at: "",
  });

  // 알림 모달
  const alertModal = ref({
    show: false,
    title: "알림",
    message: "",
    type: "alert",
    onConfirm: null,
  });

  const showAlert = (message, title = "알림") => {
    alertModal.value = { show: true, title, message, type: "alert", onConfirm: null };
  };
  const showConfirm = (message, onConfirm, title = "확인") => {
    alertModal.value = { show: true, title, message, type: "confirm", onConfirm };
  };
  const closeAlertModal = () => { alertModal.value.show = false; };
  const handleAlertConfirm = () => {
    if (alertModal.value.onConfirm) alertModal.value.onConfirm();
    closeAlertModal();
  };
  const handleAlertCancel = () => closeAlertModal();

  // 상세 조회
  const loadDetail = async () => {
    const { data, error } = await get(`/field/${fieldId}`);

    if (error || !data?.success) {
      showAlert(error?.message || data?.message || "조회에 실패했습니다.", "오류");
      return;
    }

    const row = data.data || {};
    formData.value = {
      name: row.name ?? "",
      weight: row.weight ?? "",
      status_YN: row.status_YN ?? "Y",
      created_at: row.created_at ?? "",
      updated_at: row.updated_at ?? "",
    };
  };

  // 삭제
  const handleDelete = () => {
    showConfirm(
      `'${formData.value.name}' 낚시분야를 삭제하시겠습니까?`,
      async () => {
        const { data, error } = await del(`/field/${fieldId}`);
        if (error || !data?.success) {
          showAlert(error?.message || data?.message || "삭제에 실패했습니다.", "오류");
        } else {
          showAlert(data.message || "삭제되었습니다.", "성공");
          setTimeout(() => router.push("/site-manager/field/list"), 800);
        }
      },
      "낚시분야 삭제"
    );
  };

  // 이동
  const goToList = () => router.push("/site-manager/field/list");
  const goToEdit = () => router.push(`/site-manager/field/edit/${fieldId}`);

  // 일시 포맷
  const formatDateTime = (dateString) => {
    if (!dateString) return "-";
    const date = new Date(dateString.replace(" ", "T"));
    if (isNaN(date.getTime())) return dateString;
    return date.toLocaleString("ko-KR", {
      year: "numeric",
      month: "2-digit",
      day: "2-digit",
      hour: "2-digit",
      minute: "2-digit",
    });
  };

  onMounted(() => {
    loadDetail();
  });
</script>